<template>
    <n-popconfirm :positive-text="positiveText" :negative-text="negativeText" @positive-click="onPositiveClick"
        @negative-click="onNegativeClick">
        <template #icon>
            <slot name="confirmIcon" />
        </template>
        <template #trigger>
            <n-tooltip :disabled="!tooltip" :width="twidth">
             <template #trigger>
                    <n-button v-bind="$attrs">
                        <template #icon v-if="icon">
                            <svg-icon v-if="localIcon" :local-icon="icon!" />
							<svg-icon v-else :icon="icon!" />
                        </template>
                        <template v-if="btnStr">
                            {{ btnStr }}
                        </template>
                    </n-button>
                </template>
                {{ tooltip }}

            </n-tooltip>
        </template>
        {{ confirmText }}
    </n-popconfirm>
</template>

<script  setup lang='ts' >
import { toRefs } from 'vue';

type Props = {
    btnStr: string, positiveText?: string, negativeText?: string, confirmText: string, icon?: string, tooltip?: string,twidth?:number,localIcon?:boolean,
    onPositiveClick: ((e: MouseEvent) => any);
    onNegativeClick?: ((e: MouseEvent) => any);
}
const props = withDefaults(defineProps<Props>(), {
    positiveText: '确定', negativeText: "取消",localIcon:false
})
const { btnStr, positiveText, negativeText, confirmText, onPositiveClick, onNegativeClick,twidth } = toRefs(props)
defineOptions({ name: 'PopconfirmBtn' });
</script>

<style lang='scss' scoped>
</style>
